<template>
  <!-- 子组件模板 -->
  <view class="send-good-view" @click="goodBuy(goodInfo)">
    <!-- 这里根据实际需求展示商品信息 -->
    <view v-if="goodInfo"> 
      <view class="good-name">{{ goodInfo.productName }}</view>
      <view class="image-container">
        <image :src="goodInfo.dbPicPath" mode="aspectFill" ></image>
      </view>
      <view class="good-description">{{goodInfo.description}}</view> 
      <!-- 只有当 goodInfo 不为 null 时才显示价格 -->
      <view class="good-price">￥{{goodInfo.price}} 元/{{goodInfo.unit}}</view>
    </view>
    
    <view v-else-if="isLoading">
      商品信息加载中...
    </view>
    
    <view v-else>
      未找到该商品信息
    </view>
  </view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
  // 接收父组件传递的 productId 作为 prop
  props: {
    productId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      goodInfo: null, // 存储商品信息
      isLoading: true // 加载状态
    };
  },
  created() {
    // 在组件创建时调用获取商品信息的方法
    this.fetchGoodInfo();
  },
  methods: {
    async fetchGoodInfo() {
      try {
        const res = await db.collection('sendgood').where({
          productId: this.productId
        }).get();
        
        if (res.data.length > 0) {
          // 取查询结果的第一条数据
          this.goodInfo = res.data[0];
        } else {
          // 未查询到商品信息
          this.goodInfo = null;
        }
      } catch (error) {
        console.error('获取商品信息失败:', error);
        this.goodInfo = null;
      } finally {
        // 无论请求成功还是失败，都将加载状态置为 false
        this.isLoading = false;
      }
    },
		goodBuy(e){
				console.log(e)
				const formatedData=encodeURIComponent(JSON.stringify(e)) 
				uni.navigateTo({
					url:`/pages/goodBuy/goodBuy?item=${formatedData}`
				})
			}
  }
};
</script>

<style scoped>
.send-good-view {
  display: flex;
  width: 400rpx;
  height: 500rpx;
  align-items: center;
  gap: 10rpx;
}

.good-name {
  background-color: white;
  text-align: center;
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  border-top-right-radius: 10rpx;
  border-top-left-radius: 10rpx;
}
.image-container {
  position: relative;
  display: flex; 
  width: 400rpx
}

.good-description {
  position: absolute;
  width: 150rpx;
  border-radius: 5rpx;
  background-color: rgba(85, 170, 255, 0.5);
  bottom: 5rpx;
  left: 5rpx;
  font-size: 28rpx;
  color: white;
}
.good-price{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>